<template>
<div>
    <Phead />
    <div class="langgreen firstround">
        <div class="w">
            <h6>第二轮报价</h6>
            <p>温馨提示：请您在招标结束前发起投标，谢谢！</p>
        </div>
    </div>
    <div class="w inthebidding stamp">
        <div class="clearfix">
            <div class="box-1 box">
                <h4>项目信息</h4>
                <table>
                    <tbody>
                        <tr>
                            <td>项目名称：{{bid_data.bid_name}}</td>
                            <td>项目编号：{{bid_data.bid_sn}}</td>
                        </tr>
                        <tr>
                            <td>收货地址：{{bid_data.area}}</td>
                            <td>收货时间：{{bid_data.bid_arrival_time}}</td>
                        </tr>
                        <tr>
                            <td>预算：{{bid_data.bid_budget}}</td>
                            <td>最低降幅：千分之四</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="box-2 box box-22">
                <h5>第三轮开始还有</h5>
                <div class="time">
                    <i id="h">{{h}}</i>
                    <em>时</em>
                    <i id="m">{{m}}</i>
                    <em>分</em>
                    <i id="s">{{s}}</i>
                    <em>秒</em>
                </div>
                <input v-model="bjVal" type="text" class="text" placeholder="请输入您的报价" v-if="!bid_data.is_pushPrice">
                <button @click = "pushPrice" class="button" v-if="!bid_data.is_pushPrice">确认报价</button>

                <p>您的报价金额为：{{formatMoney}}元</p>
                <p>本轮您还有{{ bid_data.is_pushPrice== 1?'0':'1'}}次报价机会，当前最低</p>
                <p>报价：￥{{bid_data.now_minPrice}}元</p>
                <p>您的报价至少要小于等于：￥{{bid_data.now_mixPush}}元</p>
            </div>
        </div>
        <div class="box box-3">
            <h4>招标信息</h4>
            <table>
                <tbody>
                    <tr>
                        <td>招标开始时间：{{bid_data.bid_start_time}}</td>
                        <td>付款方式：{{bid_data.bid_pay_type}}</td>
                    </tr>
                    <tr>
                        <td>参与规则：{{guize}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="box box-4">
            <i>备注信息</i>
            <p>{{bid_data.bid_remark}}</p>
        </div>
        <div class="box box-5">
            <h4>招标产品</h4>
            <table>
               <tbody>
                    <tr v-for="(item,index) in bid_data.goods">

                      <td>{{item.goods_name}}</td>
                      <td>{{item.goods_num}}</td>
                      <td>{{item.goods_price}}元</td>
                      <td @click="showGoods(index)" >
                        <button>产品详情</button>
                      </td> 
                    </tr>
                    
                </tbody>
            </table>
        </div>
        <div class="box box-8">
            <h4>投标明细</h4>
            <table class="clearfix">
                <tbody>
                    <tr v-for="(item,index) in bid_data.record" :key="index">
                        <td>
                            <div class="date">
                                <div class="left fl">
                                    <p>{{item.add_time}}</p>
                                </div>
                                <div class="right fr">
<!--                                     <p>18:39</p>
 -->                                    <p>第{{item.rotation}}轮</p>
                                </div>
                                <i></i>
                            </div>
                        </td>
                        <td>供应商：{{item.user_company}}</td>
                        <td>投注金额：{{item.price}}元</td>
                    </tr>
                    
                </tbody>
            </table>
<!--             <button>全部明细</button>
 -->        </div>
        <div class="box box-6">
            <router-link to="/bid/pushbid">
                  <button>我要招标</button>
            </router-link>
        </div>
        
      </div>

    <Pfoot />

    <!-- 弹窗 -->
    <Pdailog :is-show="dailogShow" @on-close="closeDialog" >
         <div slot="main">{{dailogText}}</div>
    </Pdailog>
    <!-- 报价确认 -->
    <Pdailog :is-show="isShowPushAlert" :is-confirm="true"  @on-close="closeDialog" @on-confirm="confirmDialog">
         <div slot="main">{{isShowPushAlertText}}</div>
    </Pdailog>

    <!-- 产品详情弹窗 -->
    <div class="dialog">
        <div class="black"  v-if="isProMaskShow">
           <div class="dialog-cover back"  @click="isProMaskShow =false"></div>
            <div class="hint3">
                <h2>{{goods_detail.goods_name}}</h2>
                <p>品牌/型号：{{goods_detail.goods_brand_model}}</p>
                <p>单位：{{goods_detail.goods_unit}}</p>
                <p>数量：{{goods_detail.goods_num}}</p>
                <p>单价：￥{{goods_detail.goods_price}}</p>
                <p>产品说明：{{goods_detail.goods_remark}}</p>
                <div class="close" @click="isProMaskShow = false">关闭</div>
            </div>
        </div>
    </div>

  </div>

</template>

<script>
import Phead from '@/components/Phead.vue'
import Pfoot from '@/components/Pfoot.vue'
import Pdailog from '@/components/Pdailog.vue'
    
export default {
  data(){
    return{
        headBg: false,  //左上角 “< 投标” 使用数据  当页面向下滚动  该值变为 true
        bid_data:{},
        bjVal:0.00,
        formatMoney:0.00,
        h: '00', //时
        m: '00', //分
        s: '00', //秒
        guize: '本次报价共3轮，每轮允许报价1次，每轮报价10分钟',
        goods_detail:{
          goods_name:'',
          goods_brand_model:'',//品牌型号
          goods_unit:'',
          goods_price:'',
          goods_num:'',
          goods_remark:''
        },
        isProMaskShow: false, // 是否显示产品弹框
        downTime:'',
      
        dailogShow:false,
        dailogText:'报名成功',
        
        isShowPushAlert: false,  //确认报价弹框
        isShowPushAlertText: '', 
     }
  },
  async created(){
    let user_token = this.getUserToken()
    let bidId =  this.$route.query.bid_id
    let re = await this.$axios.post('bid/getBidDetail',{
        bid_id:bidId,
        user_token:user_token
    })
    if(re.code == 200){
        let toWhere = '/bid/'+re.data.toWhere;
        //如果不是当前页面跳转
        if(toWhere != this.$route.path){
            this.$router.push({path:'/'+toWhere+'?bid_id='+bidId})
            
        }else{
              let bid_data = re.data;
              //如果本轮已报价，显示报价金额
              if(bid_data.is_pushPrice == 1){
                  this.formatMoney = this.toMoney(bid_data.current_pushPrice)
              }
              this.bid_data = bid_data
              //最低价格提示
              this.dailogShow = true
              this.dailogText = '当前最低报价：'+bid_data.now_minPrice+'，下一次报价至少要小于等于：￥'+bid_data.now_mixPush+'元'
              
              this.setCountDown();             

        }    


     }

  },
  
  watch: {
    bjVal: function (val) {
      this.formatMoney = this.toMoney(val)
    },
  },

  components: {
    Phead,
    Pfoot,
    Pdailog
  },

  mounted(){
            
  },
  
  methods:{
    //报价
    pushPrice:function(){  //判断报价是否为空  如果为空 弹出提示  否则 弹出模态框
        let val = this.bjVal;
        let formatMoney = this.formatMoney;//格式化金额
        let bid_data = this.bid_data
        let user_token = this.getUserToken();
        if(val == ""){
            this.dailogShow = true
            this.dailogText = '请填写您的报价'
        }else if(parseFloat(val) > parseFloat(this.bid_data.now_mixPush)){
            this.dailogShow = true
            this.dailogText = '您的报价至少要小于等于：'+this.bid_data.now_mixPush
        }else if(isNaN(val)){
            this.dailogShow = true
            this.dailogText = '不要输入其他字符'

        }else{
            this.isShowPushAlert = true
            this.isShowPushAlertText = '您的报价金额为：'+formatMoney+'元,确认报价？' 
        
        }
    },
    //显示商品
    showGoods(index){
      let goods = this.bid_data.goods[index];
      console.log(index)
      this.isProMaskShow = true
      this.goods_detail.goods_name = goods.goods_name
      this.goods_detail.goods_brand_model = goods.goods_brand_model

      this.goods_detail.goods_unit = goods.goods_unit
      this.goods_detail.goods_num = goods.goods_num
      this.goods_detail.goods_price = goods.goods_price
      this.goods_detail.goods_remark = goods.goods_remark
    },
    //倒计时
       setCountDown(){
        let that = this;
        let time = 1000;
        let bid_data = this.bid_data
          this.downTime = setInterval(function(){
              if (bid_data.time1 < 0) {
                  bid_data.time1 = 0
                      //如果报名，跳转
                      if(bid_data.isEnroll == 1){
                          let user_token = that.getUserToken();
                          let res =  that.$axios.post('bid/getGoWhere',{
                            bid_id:bid_data.bid_id,
                            user_token:user_token
                          }).then(function(res){
                            if(res.code == 200){
                                that.$router.push({path:'/bid/'+res.data.toWhere,query: {
                                bid_id: bid_data.bid_id,
                               }})
                            }

                          })
  
                      }
               }else{
                    let formatTime = that.getFormat(bid_data.time1);
                    bid_data.time1 -= time
                    that.bid_data = bid_data
                    that.h = formatTime.hh
                    that.m = formatTime.mm
                    that.s = formatTime.ss
              }
           }, time)

      },
  
       //上拉加载更多
      async onPullingUp(){
            clearInterval(this.downTime);
              //遮罩  
            const toast = this.$createToast({
              txt: '加载中...',
              //mask: true
            })
            toast.show()

              //获取数据
            let user_token = this.getUserToken()
            let re = await this.$axios.post('bid/getBidDetail',{
                bid_id:this.bid_data.bid_id,
                user_token:user_token,
              
              });

            if(re.code == 200){
                  this.bid_data = re.data;
                  //如果本轮已报价，显示报价金额
                  if(this.bid_data.is_pushPrice == 1){
                      this.formatMoney = this.toMoney(this.bid_data.current_pushPrice)
                  }                  
                  this.setCountDown();
            }
            toast.hide()
            this.$refs.scroll.forceUpdate()
      },
    reback(){
        if(this.$route.query.redirect){
              if(this.$route.query.bidtype){
                this.$router.replace({path:this.$route.query.redirect,query:{
                  bidtype:this.$route.query.bidtype
                }});
              }else{
                this.$router.replace({path:this.$route.query.redirect})
              }
        }else{
             this.$router.replace({path:'/'})
        }
     },

     //关闭弹窗
     closeDialog(){
          this.dailogShow=false;
          this.isShowPushAlert = false;
     },
     //确认按钮
     confirmDialog(){       
          let user_token = this.getUserToken();
          this.$axios.post('bid/pushPrice',{
              user_token:user_token,
              bid_id:this.bid_data.bid_id,
              price:this.bjVal,
              rotation:2
           })
           .then(response => {
               if(response.code == 200){
                    this.isShowPushAlert = false;

                    this.dailogShow = true
                    this.dailogText = '报价成功'

                    this.bid_data.is_pushPrice = 1;
                    this.bid_data = bid_data
                }else{
                    this.isShowPushAlert = false;

                    this.dailogShow = true
                    this.dailogText = response.msg
                }
           })
     }


  },
  
  beforeRouteLeave(to,from,next){
    clearInterval(this.downTime);
    next()
  },

}
</script>